<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css">
   <style>
      .text-delete {
         text-decoration: line-through;
         color: #C9C5C5;
      }

      .text-close {
         color: #C9C5C5;
      }
   </style>
</head>

<body style="background-color:#f8f8f8;">
   <div id="app">

      <!--集群信息dialog-->
      <el-dialog title="集群信息" :visible.sync="dialogCompanyVisible" :close-on-click-modal="false" width="50%">
         <div style="height:200px;overflow-y:auto;">
            <el-form ref="companyForm" :model="companyData" :rules="rules" :disabled="dialogCompanyDisabled"
               label-width="120px" size="mini" style="margin-right: 30px;">
               <el-col :span="12">
                  <el-form-item label="集群名称" prop="name">
                     <el-input v-model="companyData.name"></el-input>
                  </el-form-item>
                  <el-form-item label="联系人">
                     <el-input v-model="companyData.contacts"></el-input>
                  </el-form-item>
                  <el-form-item label="地址">
                     <el-input v-model="companyData.address"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                     <el-input v-model="companyData.email"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="所属集群">
                     <el-select v-model="companyData.tid" style="width: 200px;" size="mini" placeholder="请选择"
                        :disabled="!isAdmin">
                        <el-option v-for="item in officeSelectData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="集群代码">
                     <el-input v-model="companyData.orgcode"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" prop="phone">
                     <el-input v-model="companyData.phone"></el-input>
                  </el-form-item>

               </el-col>
            </el-form>
         </div>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogCompanyVisible = false">取 消</el-button>
            <el-button @click="submitEditCompany" type="primary" :disabled="dialogCompanyDisabled">确 定
            </el-button>
         </div>
      </el-dialog>

      <!--公司信息dialog-->
      <el-dialog title="公司信息" :visible.sync="dialogOfficeVisible" :close-on-click-modal="false" width="50%">
         <div style="height:240px;overflow-y:auto;">
            <el-form ref="officeForm" :model="officeData" :rules="rules" :disabled="dialogOfficeDisabled"
               label-width="120px" size="mini" style="margin-right: 30px;">
               <el-col :span="12">
                  <el-form-item label="公司名称" prop="name">
                     <el-input v-model="officeData.name"></el-input>
                  </el-form-item>
                  <el-form-item label="机构代码">
                     <el-input v-model="officeData.orgcode"></el-input>
                  </el-form-item>
                  <el-form-item label="联系人">
                     <el-input v-model="officeData.contacts"></el-input>
                  </el-form-item>
                  <el-form-item label="地址">
                     <el-input v-model="officeData.address"></el-input>
                  </el-form-item>
                  <el-form-item label="序号(高-低)">
                     <el-input-number v-model="officeData.sort" :min="0" :max="9999"></el-input-number>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="所属集群">
                     <el-select v-model="officeData.tid" style="width: 200px;" size="mini" placeholder="请选择"
                        :disabled="!isAdmin">
                        <el-option v-for="item in officeSelectData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="联系电话" prop="phone">
                     <el-input v-model="officeData.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                     <el-input v-model="officeData.email"></el-input>
                  </el-form-item>
                  <el-form-item label="状态">
                     <el-select v-model="officeData.status" placeholder="请选择">
                        <el-option v-for="item in optionData.status" :key="item.value" :label="item.name"
                           :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-form>
         </div>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogOfficeVisible = false">取 消</el-button>
            <el-button @click="submitEditOffice" type="primary" :disabled="dialogOfficeDisabled">确 定</el-button>
         </div>
      </el-dialog>

      <!--员工信息dialog-->
      <el-dialog title="员工信息" :visible.sync="dialogMemberVisible" :close-on-click-modal="false" width="50%">
         <div style="height:330px;overflow-y:auto;">
            <el-form ref="memberForm" :model="memberData" :rules="rules" :disabled="dialogMemberDisabled"
               label-width="120px" size="mini" style="margin-right: 30px;">
               <el-col :span="12">
                  <el-form-item label="姓名" prop="name">
                     <el-input v-model="memberData.name"></el-input>
                  </el-form-item>
                  <el-form-item label="证件号">
                     <el-input v-model="memberData.orgcode"></el-input>
                  </el-form-item>
                  <el-form-item label="地址">
                     <el-input v-model="memberData.address"></el-input>
                  </el-form-item>
                  <el-form-item label="序号(高-低)">
                     <el-input-number v-model="memberData.sort" :min="0" :max="9999"></el-input-number>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="所属集群">
                     <el-select v-model="memberData.tid" style="width: 200px;" size="mini" placeholder="请选择"
                        :disabled="!isAdmin">
                        <el-option v-for="item in officeSelectData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="联系电话" prop="phone"
                     :rules="[{required: true, trigger: 'blur', validator: validPhone}]">
                     <el-input v-model="memberData.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                     <el-input v-model="memberData.email"></el-input>
                  </el-form-item>
                  <el-form-item label="状态">
                     <el-select v-model="memberData.status" placeholder="请选择">
                        <el-option v-for="item in optionData.status" :key="item.value" :label="item.name"
                           :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="权限角色">
                     <el-select v-model="memberData.roles" multiple placeholder="请选择(可多选)" style="width:100%">
                        <el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="权限范围">
                     <el-select v-model="memberData.roles_scope" placeholder="请选择">
                        <el-option v-for="item in optionData.roles_scope" :key="item.value" :label="item.name"
                           :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-button style="margin-left: 20px;" type="primary" size="mini" @click="showSelectOfficeDialog"
                     v-show="memberData.roles_scope == 3">选择权限部门</el-button>
               </el-col>
               <el-col :span="24">
                  <el-form-item label="授权部门" v-show="memberData.roles_scope == 3">
                     <el-tag v-for="item in strToIntArray(memberData.roles_office_list)" size="mini"
                        style="margin: 0px 5px;">{{orgAllData[item].name}}</el-tag>
                  </el-form-item>
               </el-col>
            </el-form>
         </div>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogMemberVisible = false">取 消</el-button>
            <el-button @click="resetWeixinBind(memberData.id)" :disabled="dialogMemberDisabled">解除微信绑定</el-button>
            <el-button @click="resetPassword(memberData.id)" :disabled="dialogMemberDisabled">重置密码</el-button>
            <el-button @click="submitEditMember" type="primary" :disabled="dialogMemberDisabled">确 定</el-button>
         </div>
      </el-dialog>

      <!--员工扩展信息dialog-->
      <el-dialog title="员工扩展信息" :visible.sync="dialogMemberExtVisible" :close-on-click-modal="false" width="50%">
         <div v-loading="memberDataLoading" style="height:300px;overflow-y:auto;">
            <el-form ref="memberExtForm" :model="memberExtData" :rules="rules" :disabled="dialogMemberExtDisabled"
               label-width="120px" size="mini" style="margin-right: 30px;">
               <el-col :span="12">
                  <el-form-item label="姓名" prop="name">
                     <el-input v-model="memberExtData.name"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" prop="phone"
                     :rules="[{required: true, trigger: 'blur', validator: validPhone}]">
                     <el-input v-model="memberExtData.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                     <el-select v-model="memberExtData.sex" placeholder="请选择">
                        <el-option v-for="item in optionData.sex" :key="item.value" :label="item.name"
                           :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="身份证" prop="idcard">
                     <el-input v-model="memberExtData.idcard"></el-input>
                  </el-form-item>
                  <el-form-item label="岗位">
                     <el-input v-model="memberExtData.position"></el-input>
                  </el-form-item>
                  <el-form-item label="状态">
                     <el-select v-model="memberExtData.workStatus" placeholder="请选择">
                        <el-option v-for="item in optionData.work_status" :key="item.key" :label="item.name"
                           :value="item.key">
                        </el-option>
                     </el-select>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="员工编号">
                     <el-input v-model.number="memberExtData.memberNo"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                     <el-input v-model="memberExtData.email"></el-input>
                  </el-form-item>
                  <el-form-item label="生日">
                     <el-date-picker v-model="memberExtData.birthday" type="date" placeholder="选择日期"
                        style="width: auto;">
                     </el-date-picker>
                  </el-form-item>
                  <el-form-item label="家庭地址">
                     <el-input v-model="memberExtData.address"></el-input>
                  </el-form-item>
                  <el-form-item label="入职时间">
                     <el-date-picker v-model="memberExtData.entryTime" type="date" placeholder="选择日期"
                        style="width: auto;">
                     </el-date-picker>
                  </el-form-item>
                  <el-form-item label="排序(高-低)">
                     <el-input-number v-model="memberExtData.sort" :min="1" :max="10000" label="描述文字"></el-input-number>
                  </el-form-item>
               </el-col>
            </el-form>
         </div>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogMemberVisible = false">取 消</el-button>
            <el-button @click="dialogMemberVisible = false">重置密码</el-button>
            <el-button @click="submitEditMember" type="primary">确 定</el-button>
         </div>
      </el-dialog>

      <!--员工移至其它部门-->
      <el-dialog title="请选择目的机构：" :visible.sync="dialogMoveMemberVisible" :close-on-click-modal="false" width="30%">
         <div style="height:300px;overflow-y:auto;">
            <div>移动 [{{memberData.name}}] 至其它机构</div>
            <br />
            <el-tree ref="moveOrgTree" node-key="id" :props="treeDefaultProps" :data="treeData" default-expand-all
               accordion highlight-current>
            </el-tree>
         </div>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogMoveMemberVisible = false">取 消</el-button>
            <el-button @click="submitMoveMember" type="primary">确 定</el-button>
         </div>
      </el-dialog>

      <!--选择权限所属部门-->
      <el-dialog title="请选择权限所属机构（多选）：" :visible.sync="dialogSelectOfficeVisible" :close-on-click-modal="false"
         width="30%">
         <div style="height:300px;overflow-y:auto;">
            <el-tree ref="selectOfficeTree" node-key="id" :props="treeDefaultProps" :data="treeData"
               :default-checked-keys="selectedOfficeKeys" default-expand-all show-checkbox accordion check-strictly>
            </el-tree>
         </div>
         <div slot="footer" class="dialog-footer">
            <el-button @click="dialogSelectOfficeVisible = false">取 消</el-button>
            <el-button @click="submitSelectOffice" type="primary">确 定</el-button>
         </div>
      </el-dialog>

      <el-card class="box-card" :body-style="{padding:'10px'}">
         <div>

            <div style="padding: 10px; background-color: #f8f8f8; font-size: 14px;">
               <el-row :gutter="20">
                  <el-col :span="20">
                     <el-form ref="searchForm" :model="searchForm" :rules="rules" size="mini"
                        style="margin-right: 30px;">
                        姓名：
                        <el-input size="mini" style="width: 120px;" placeholder="员工姓名" v-model="searchForm.name"
                           @keyup.enter.native="searchMember">
                        </el-input>
                        <span style="padding: 0px 20px 0px 20px;">&nbsp;</span>
                        电话：
                        <el-input size="mini" style="width: 160px;" placeholder="员工手机号" v-model="searchForm.phone"
                           @keyup.enter.native="searchMember">
                        </el-input>
                        <span style="padding: 0px 20px 0px 20px;">&nbsp;</span>
                        <el-button type="primary" size="mini" @click="searchMember">搜索</el-button>
                        <el-button type="primary" size="mini" @click="resetSearch">重置</el-button>
                     </el-form>
                  </el-col>
                  <el-col :span="4">
                  </el-col>
               </el-row>
            </div>


            <el-table v-loading="tableLoading" ref="orgDataTable" :data="tableData" style="width: 100%;"
               :cell-style="{padding:'0px'}" :row-key="getRowKey" border :height="tableHeight" :max-height="tableHeight"
               size="mini" lazy :load="loadTableData" default-expand-all indent="20"
               :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @row-dblclick="editScope">
               <el-table-column prop="name" label="姓名" width="400" fixed="left">
                  <template slot-scope="scope">
                     <el-link :underline="false" v-if="scope.row.type == 1" type="success"
                        :style="getStyleByStatus(scope.row.status)" icon="el-icon-s-shop">
                        {{scope.row.name}}
                     </el-link>
                     <el-link :underline="false" v-if="scope.row.type == 2" type="primary"
                        :style="getStyleByStatus(scope.row.status)" icon="el-icon-s-order">
                        {{scope.row.name}}
                     </el-link>
                     <el-link :underline="false" v-if="scope.row.type == 3" type="warning"
                        :style="getStyleByStatus(scope.row.status)" icon="el-icon-user-solid">
                        {{scope.row.name}}
                     </el-link>
                  </template>
               </el-table-column>
               <el-table-column prop="id" label="ID" width="60">
               </el-table-column>
               <el-table-column prop="sort" label="排序" width="60">
               </el-table-column>
               <el-table-column label="属性" width="260">
                  <template slot-scope="scope">
                     <el-tag size="small" v-for="tag in getAttribute(scope.row)" :type="tag.type"
                        style="margin-right: 2px;">
                        {{tag.name}}</el-tag>
                  </template>
               </el-table-column>
               <el-table-column prop="contacts" label="联系人" width="120">
               </el-table-column>
               <el-table-column prop="phone" label="联系电话" width="120">
               </el-table-column>
               <el-table-column prop="weixin_open_id" label="OpenId" show-overflow-tooltip>
               </el-table-column>
               <el-table-column fixed="right" label="操作" width="230">
                  <template slot-scope="scope">
                     <!-- 基础配置里已经有了创建企业、单位功能，而且创建的时候同步创建学习配置信息等。所以该处的添加功能隐藏掉，禁止使用 -->
                     <el-button v-if="scope.row.status > 0 && scope.row.type === 1" @click="addItem(scope.row, 1)"
                        type="text" class="my-color-primary" size="small">添加集群
                     </el-button>
                     <el-button v-if="scope.row.status > 0 && scope.row.type === 1" @click="addItem(scope.row, 2)"
                        type="text" class="my-color-primary" size="small">添加公司
                     </el-button>
                     <!--
                     <el-button v-if="scope.row.status > 0 && scope.row.type === 2" @click="addItem(scope.row, 2)"
                        type="text" class="my-color-primary" size="small">添加下级公司
                     </el-button>
                     -->
                     <el-button v-if="scope.row.status > 0 && scope.row.type === 1" @click="addItem(scope.row, 3)"
                        type="text" class="my-color-warning" size="small">添加员工
                     </el-button>
                     <el-button v-if="scope.row.status > 0 && scope.row.type === 2" @click="addItem(scope.row, 3)"
                        type="text" class="my-color-warning" size="small">添加员工
                     </el-button>
                     <el-button v-if="scope.row.status > 0 && scope.row.type === 3" @click="moveMember(scope.row)"
                        type="text" class="my-color-danger" size="small">移至其他部门
                     </el-button>
                  </template>
               </el-table-column>
            </el-table>
         </div>
      </el-card>
   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/my_util.js"></script>

<script>

   var marginHeight = 92; // 高差数

   var vm = new Vue({
      el: '#app',
      data: function () {
         return {
            tableHeight: window.innerHeight - marginHeight, // 表格高，当窗口改变大小的时候通过 pageResize 修改该值
            tableLoading: true,         // 加载表格数据前显示等待画面
            currentMemberData: {},       // 当前登录的系统管理员
            tableData: [],              // 表格数据
            treeData: [],               // 树形图数据，用于“移至其它部门”功能
            roleData: [],               // 权限角色数据
            orgAllData: {},             // 所有机构数据
            officeSelectData: [],       // 部门下拉列表数据
            searchForm: {},              // 按姓名搜索

            // 树形图中的参数配置
            treeDefaultProps: {
               children: 'children',
               label: 'name'
            },

            selectedOfficeKeys: [1, 2, 3, 4],   // 選中的部門參數
            dialogCompanyVisible: false,    // 是否显示公司信息对话框
            dialogCompanyDisabled: false,   // 公司信息对话框是否禁止编辑
            dialogOfficeVisible: false,     // 是否显示部门信息对话框
            dialogOfficeDisabled: false,    // 部门信息对话框是否禁止编辑
            dialogMemberVisible: false,     // 是否显示员工信息对话框
            dialogMemberDisabled: false,    // 员工信息对话框是否禁止编辑
            dialogMemberExtVisible: false,  // 是否显示员工扩展信息对话框
            dialogMemberExtDisabled: false, // 员工扩展信息对话框是否禁止编辑
            memberDataLoading: true,        // 读取员工信息前显示等待画面
            dialogMoveMemberVisible: false, // 是否显示“移动员工至其他部门”对话框
            dialogSelectOfficeVisible: false,// 是否显示“选择权限所属部门”对话框
            companyData: {},      // 公司对话框中的数据
            officeData: {},       // 部门对话框中的数据
            memberData: {},       // 员工对话框中的数据
            memberExtData: {},    // 员工对话框中的数据
            treeMaps: new Map(),  // 保存懒加载的参数


            // 表单中的数据验证规则
            rules: {
               name: [
                  { required: true, trigger: 'blur', message: '该值不能为空' },
                  { min: 2, max: 20, trigger: 'blur', message: '长度在 2 到 20 个字符' }
               ],
               phone: [
                  { required: false, trigger: 'blur', validator: validPhone } // 判断手机号码格式是否正确（非必填）
               ],
               idcard: [
                  { required: false, trigger: 'blur', validator: validIdCard } // 判断身份证号码是否正确（非必填）
               ],
               email: [
                  { required: false, trigger: 'blur', validator: validEmail } // 判断Email地址是否正确（非必填）
               ]
            },


            // 用于树形表格中的 row_key
            getRowKey(row) {
               return row.id;
            },

            // 格式化表格中的属性内容
            getAttribute(row) {
               let tags = [];
               if (row.type == 1) {
                  tags.push({ "name": "集群", "type": "success" });
               } else if (row.type == 2) {
                  tags.push({ "name": "公司", "type": "" });
               } else if (row.type == 3) {

                  if (typeof row.roles != "string") {
                     row.roles.forEach(v => {
                        this.roleData.forEach(obj => {
                           if (obj.id == v) {
                              tags.push({ "name": obj.name, "type": "warning" });
                           }
                        })
                     })
                  }

               }

               if (row.status == 0) {
                  tags.push({ "name": "停用", "type": "info" });
               } else if (row.status < 0) {
                  tags.push({ "name": "已删除", "type": "info" });
               }

               return tags;
            }
         }
      },
      computed: {
         // 从缓存中读取
         optionData: function () {
            let optionDataStr = sessionStorage.getItem('optionData');
            return JSON.parse(optionDataStr || "{}");
         },

         // 判断是否管理员
         isAdmin: function () {
            if (this.currentMemberData && this.currentMemberData.pid === 1) {
               return true;
            } else {
               return false;
            }
         }

      },
      mounted() {
         // 当窗口大小发生改变的时候系统自动调用
         window.onresize = () => {
            this.pageResize();
         }
      },
      methods: {
         // 改变表格高度
         pageResize() {
            this.tableHeight = window.innerHeight - marginHeight;
         },

         // 重置表单
         resetForm(formName) {
            if (this.$refs[formName] !== undefined) {
               this.$refs[formName].resetFields();
            }
         },

         // 根据状态给出样式，
         getStyleByStatus: function (status) {
            if (status > 0) {
               return {}
            } else if (status == 0) {
               return {
                  color: "#aaa"
               }
            } else if (status < 0) {
               return {
                  color: "#aaa",
                  textDecoration: "line-through"
               }
            }
         },

         // 展开行
         expandRow(row) {
            this.$refs.orgDataTable.toggleRowExpansion(row);
         },

         // 树形表格中加载数据的方法
         loadTableData(tree, treeNode, resolve) {
            // 保存懒加载的参数
            const pid = tree.id;
            this.treeMaps.set(pid, { tree, treeNode, resolve })

            // 获取下级数据
            axios.get('/admin/sys/' + tree.id + '/show/sys_organ.bu')
               .then(function (response) {
                  if (response.data.code > 0) {

                     // 把权限roles字符串转成int数组
                     response.data.bundle.forEach(item => {
                        item.roles = strToIntArray(item.roles);
                     });

                     resolve(response.data.bundle);
                  } else if (response.data.code == 0) {
                     resolve([]);
                     tree.hasChildren = false;
                  } else {
                     vm.$message.error(response.data.msg);
                  }
               })
               .catch(function (error) {
                  vm.$message.error('获取数据失败！' + error);
               })
         },

         // 树形图加载下级数据
         loadTreeData(node, resolve) {
            // 获取下级数据
            let id = node.data != undefined ? node.data.id : 0
            axios.get('/admin/sys/' + id + '/show/sys_organ!no_member.bu')
               .then(function (response) {
                  if (response.data.code > 0) {

                     // 把权限roles字符串转成int数组
                     response.data.bundle.forEach(item => {
                        item.roles = strToIntArray(item.roles);
                     });

                     resolve(response.data.bundle);
                  } else if (response.data.code == 0) {
                     resolve([]);
                  } else {
                     vm.$message.error(response.data.msg);
                  }
               })
               .catch(function (error) {
                  vm.$message.error('获取数据失败！' + error);
               })
         },

         // 重新加载父级树列表
         reloadTree(pid) {
            if (this.treeMaps.has(pid)) {
               const { tree, treeNode, resolve } = this.treeMaps.get(pid)
               this.$set(this.$refs.orgDataTable.store.states.lazyTreeNodeMap, pid, [])
               this.loadTableData(tree, treeNode, resolve);
            }
         },

         // 添加项目（部门，员工）
         addItem(row, type) {
            if (type == 1) {
               // 添加集群
               this.resetForm('companyForm'); // 重置表单数据
               this.companyData = { type: 1, pid: row.id, status: 1, tid: 0 };
               this.companyData.tid = row.id; // 最顶级ID 
               this.dialogCompanyVisible = true;
               this.dialogCompanyDisabled = false;
               this.CompanyDataLoading = false;
            } else if (type === 2) {
               // 添加公司
               this.resetForm('officeForm'); // 重置表单数据
               this.officeData = { type: 2, pid: row.id, status: 1, tid: 0 };
               if (row.type === 1) {
                  this.officeData.tid = row.id; // 最顶级ID
               } else if (row.type == 2) {
                  this.officeData.tid = row.tid; // 最顶级ID
               }
               this.dialogOfficeVisible = true;
               this.dialogOfficeDisabled = false;
               this.officeDataLoading = false;
            } else if (type === 3) {
               // 添加员工
               this.resetForm('memberForm'); // 重置表单数据
               this.memberData = { type: 3, pid: row.id, tid: row.tid, status: 1 };
               if (row.type === 1) {
                  this.memberData.tid = row.id; // 最顶级ID
               } else if (row.type == 2) {
                  this.memberData.tid = row.tid; // 最顶级ID
               }
               this.dialogMemberVisible = true;
               this.dialogMemberDisabled = false;
               this.memberDataLoading = false;
            }
         },

         // 点击“移动员工至其他部门”按钮调用
         moveMember(row) {
            this.memberData = JSON.parse(JSON.stringify(row));
            this.dialogMoveMemberVisible = true;
         },

         // 提交“移动员工至其他部门”事件
         submitMoveMember() {

            let currentNode = this.$refs.moveOrgTree.getCurrentNode()
            if (currentNode != null && currentNode != undefined) {
               let data = {}
               data.memberId = this.memberData.id;
               data.tagOfficeId = currentNode.id;

               axios.post('/admin/sys/edit/sys_organ!move_member.bu', data)
                  .then(function (response) {
                     if (response.data.code > 0) {
                        vm.$message.success(response.data.msg);
                        vm.dialogMoveMemberVisible = false;

                        // 重新加载父级树列表
                        vm.reloadTree(vm.memberData.pid);
                        vm.reloadTree(currentNode.id);

                     } else {
                        vm.$message.error(response.data.msg);
                     }
                  })
                  .catch(function (error) {
                     console.log(error);
                     vm.$message.error('出错：' + error);
                  });
            } else {
               vm.$message.error("请选择目的地部门");
            }
         },

         // 显示选择权限所属部门调用的方法
         showSelectOfficeDialog() {
            let selectedKeys = strToIntArray(this.memberData.roles_office_list);
            console.log(selectedKeys);
            if (this.$refs.selectOfficeTree) {
               console.log("通过 setCheckedKeys 设置勾选状态");
               this.$refs.selectOfficeTree.setCheckedKeys(selectedKeys);
            } else {
               console.log("通过 默认值 设置勾选状态");
               this.selectedOfficeKeys = selectedKeys;
            }
            this.dialogSelectOfficeVisible = true;
         },

         // 提交权限所属部门的选择
         submitSelectOffice() {
            let checkedArry = this.$refs.selectOfficeTree.getCheckedKeys();
            this.memberData.roles_office_list = arrayToStr(checkedArry, ',');
            this.dialogSelectOfficeVisible = false;
            console.log(checkedArry);
         },

         // 显示对象（公司，部门，员工）对话框。禁止编辑
         selectScope(row) {
            //this.$refs.orgDataTable.toggleRowExpansion(row); // 展开指定行
            if (row.type === 1) {
               this.resetForm('companyForm');
               this.dialogCompanyVisible = true;
               this.dialogCompanyDisabled = true;
               this.companyData = JSON.parse(JSON.stringify(row));
            } else if (row.type === 2) {
               this.resetForm('officeForm');
               this.dialogOfficeVisible = true;
               this.dialogOfficeDisabled = true;
               this.officeData = JSON.parse(JSON.stringify(row));
            } else if (row.type === 3) {
               this.resetForm('memberForm');
               this.dialogMemberVisible = true;
               this.dialogMemberDisabled = true;
               this.memberData = JSON.parse(JSON.stringify(row));
            }
         },

         // 编辑对象（公司，部门，员工）对话框，可编辑
         editScope(row) {
            if (row.type === 1) {
               this.resetForm('companyForm');
               this.dialogCompanyVisible = true;
               this.dialogCompanyDisabled = false;
               this.companyData = JSON.parse(JSON.stringify(row));
            } else if (row.type === 2) {
               this.resetForm('officeForm');
               this.dialogOfficeVisible = true;
               this.dialogOfficeDisabled = false;
               this.officeData = JSON.parse(JSON.stringify(row));
            } else if (row.type === 3) {
               this.resetForm('memberForm');
               this.dialogMemberVisible = true;
               this.dialogMemberDisabled = false;
               this.memberData = JSON.parse(JSON.stringify(row));
            }
         },

         // 提交对公司信息的修改
         submitEditCompany(e) {
            this.$refs.companyForm.validate((valid) => {
               if (valid) {
                  delete this.companyData.hasChildren  // 因为数据库里没有该字段。所以需要先删除,才能确保数据保存成功
                  axios.post('/admin/sys/edit/sys_organ.bu', this.companyData)
                     .then(function (response) {
                        if (response.data.code > 0) {
                           vm.$message.success(response.data.msg);
                           vm.dialogCompanyVisible = false;
                        } else {
                           vm.$message.error(response.data.msg);
                        }
                     })
                     .catch(function (error) {
                        vm.$message.error('出错：' + error);
                     });
               } else {
                  vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
                  return false;
               }
            });
         },

         // 提交修改部门信息
         submitEditOffice(e) {
            this.$refs.officeForm.validate((valid) => {
               if (valid) {
                  delete this.officeData.hasChildren  // 因为数据库里没有该字段。所以需要先删除,才能确保数据保存成功
                  this.officeData.roles = arrayToStr(this.officeData.roles)
                  axios.post('/admin/sys/edit/sys_organ.bu', this.officeData)
                     .then(function (response) {
                        if (response.data.code > 0) {
                           vm.$message.success(response.data.msg);
                           vm.dialogOfficeVisible = false;

                           // 重新加载父级树列表
                           vm.reloadTree(vm.officeData.pid);

                        } else {
                           vm.$message.error(response.data.msg);
                        }
                     })
                     .catch(function (error) {
                        vm.$message.error('出错：' + error);
                     });
               } else {
                  vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
                  return false;
               }
            });
         },

         // 提交修改员工信息
         submitEditMember(e) {
            console.log(this.memberData);
            this.$refs.memberForm.validate((valid) => {
               if (valid) {
                  delete this.memberData.hasChildren  // 因为数据库里没有该字段。所以需要先删除,才能确保数据保存成功
                  this.memberData.roles = arrayToStr(this.memberData.roles)
                  axios.post('/admin/sys/edit/sys_organ.bu', this.memberData)
                     .then(function (response) {
                        if (response.data.code > 0) {
                           vm.$message.success(response.data.msg);
                           vm.dialogMemberVisible = false;

                           // 重新加载父级树列表
                           vm.reloadTree(vm.memberData.pid);

                        } else {
                           vm.$message.error(response.data.msg);
                        }
                     })
                     .catch(function (error) {
                        vm.$message.error('出错：' + error);
                     });
               } else {
                  vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
                  return false;
               }
            });
         },

         // 重置密码
         resetPassword(id) {
            axios.post('/admin/sys/' + id + '/edit/sys_organ!repassword.bu')
               .then(function (response) {
                  if (response.data.code > 0) {
                     vm.$message.success(response.data.msg);
                  } else {
                     vm.$message.error(response.data.msg);
                  }
               })
               .catch(function (error) {
                  vm.$message.error('出错：' + error);
               });
         },


         resetWeixinBind(id) {
            axios.post('/admin/sys/' + id + '/edit/sys_organ!remove_weixin_bind.bu')
               .then(function (response) {
                  if (response.data.code > 0) {
                     vm.$message.success(response.data.msg);
                  } else {
                     vm.$message.error(response.data.msg);
                  }
               })
               .catch(function (error) {
                  vm.$message.error('出错：' + error);
               });
         },


         // 搜索员工
         searchMember() {
            vm.tableLoading = true;

            let data = { type: 3 }
            if (isNoNull(this.searchForm.name)) {
               data["name"] = this.searchForm.name;
            }
            if (isNoNull(this.searchForm.phone)) {
               data["phone"] = this.searchForm.phone;
            }

            //
            this.$refs.orgDataTable.store.states.lazyTreeNodeMap = {}

            axios.post('/admin/sys/show/sys_organ!search_member.bu', data)
               .then(function (response) {
                  if (response.data.code > 0) {
                     console.log(response.data.bundle);
                     vm.tableData = response.data.bundle;
                     vm.tableLoading = false;
                  } else {
                     vm.$message.error(response.data.msg);
                     vm.tableData = [];
                     vm.tableLoading = false;
                  }
               })
               .catch(function (error) {
                  vm.$message.error('出错：' + error);
               });
         },

         // 重置搜索表单
         resetSearch() {
            // 重新加载父级树列表
            this.$refs.orgDataTable.store.states.lazyTreeNodeMap = {}
            this.searchForm = {};
            loadSysOrganData();
         }
      },
   });

   // 获取组织机构数据
   function loadSysOrganData() {
      // 获取组织机构数据
      axios.get('/admin/sys/show/sys_organ!member_pid.bu')
         .then(function (response) {
            console.log(response.data);
            if (response.data.code > 0) {
               vm.tableData = response.data.bundle;
               vm.tableLoading = false;
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });
   }

   // 默认执行，获取组织机构数据等。
   function loadInitData() {

      // 获取“移至其它部门”需要的树形图数据
      axios.get('/admin/sys/show/sys_organ!office_tree_roles.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.treeData = response.data.bundle;
               console.log(vm.treeData);
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });

      // 获取角色数据
      axios.get('/admin/sys/show/sys_role!member.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.roleData = response.data.bundle;
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });

      // 获取所有机构数据
      axios.get('/admin/sys/get_all_org_map.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.orgAllData = response.data.bundle;
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });

      // 获取部门下拉列表数据
      axios.get('/admin/sys/show/sys_organ!office_select_roles.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.officeSelectData = response.data.bundle;
            } else if (response.data.code == 0) {
               vm.$message.error("没有数据");
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
         });

      // 获取当前登录人的信息
      axios.get('/admin/sys/get_member_data.bu')
         .then(function (response) {
            if (response.data.code > 0) {
               vm.currentMemberData = response.data.bundle;
            } else {
               vm.$message.error(response.data.msg);
            }
         })
         .catch(function (error) {
            vm.$message.error('获取登录信息失败！' + error);
         })

   };

   loadSysOrganData(); // 获取组织机构数据
   loadInitData();

</script>

</html>